<template>
  <div class="">
    <div id="container">
      <div ref="chart" style="height: 50px; width: 100%"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { reactive, watch, ref } from 'vue';
  import * as echarts from 'echarts';
  import { getFuturesKLine } from '/@/apis/userApi';
  import { useRequest } from 'vue-request';
  const chart = ref(null);
  const state = reactive<{
    option: {
      [xx: string]: any;
      series: { [xx: string]: any }[];
    };
    [xx: string]: any;
  }>({
    pid: '',
    interval: '',
    dataList: [],
    current: '',
    option: {
      grid: {
        top: 0, // 上边距
        bottom: 0, // 下边距
        left: '5', // 左边距
        right: '5', // 右边距
        containLabel: false, // 包含标签
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
        show: false,
      },
      yAxis: {
        type: 'value',
        show: false,
        minInterval: 0.0001,
        min: 'dataMin',
        max: 'dataMax',
        // boundaryGap: ['100%', 0],
      },
      series: [
        {
          data: [],
          type: 'line',
          color: [''],
          areaStyle: {
            color: '',
          },
          symbol: 'none',
          smooth: true,
          markLine: {
            symbol: ['none', 'none'],
          },
        },
      ],
    },
  });
  const props = defineProps({
    name: {
      type: String,
      default: '',
    },
    chgPct: {
      type: Number,
      default: 0,
    },
  });
  watch(
    () => props.chgPct,
    () => {
      useRequest(getFuturesKLine, {
        manual: true,
      })
        .runAsync({
          symbol: props.name,
          interval: '15m',
        })
        .then((res: any) => {
          let abc = JSON.parse(res).data;
          let sliceArr = abc.slice(0, 20);
          let arr: any[] = [];
          sliceArr.forEach((item: { [xx: string]: any }) => {
            if (item.open && item.close && item.high && item.low) {
              arr.push({
                timestamp: item.timestamp,
                open: Number(item.open).toFixed(4),
                close: Number(item.close).toFixed(4),
                high: Number(item.high).toFixed(4),
                low: Number(item.low).toFixed(4),
                volume: item.volume,
              });
            }
          });
          initChart(arr);
        });
    },
    {
      immediate: true,
    },
  );
  function initChart(data: any) {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let xData: number[] = [];
    let seriesData: { [xx: string]: any }[] = [];

    data.forEach((item: any) => {
      xData.push(item.timestamp);
      item.value = Number(item.close);
      seriesData.push(item);
    });
    const value = props.chgPct < 0;
    let colortc = '';
    if (value) {
      state.option.series[0].color = ['#FF5D5F'];
      colortc = '#FF5D5F';
    } else {
      state.option.series[0].color = ['#4CA335'];
      colortc = '#4CA335';
    }
    state.option.series[0].areaStyle.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: colortc,
      },
      {
        offset: 1,
        color: '#fff',
      },
    ]);

    state.option.xAxis.data = xData;
    state.option.series[0].data = seriesData;
    myChart.setOption(state.option);
  }
</script>
